<template>
  <Layout class="edgex-detail-page">
    <div class="p-4" v-if="ready">
      <Top :edgex="edgex" v-if="edgex" :key="id" />
      <iframe
        class="pt-4"
        src="http://106.14.157.113:4000/"
        height="800"
        width="100%"
        frameborder="0"
        scrolling="0"
      ></iframe>
    </div>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, provide, ref } from "vue";
import Layout from "../layout/index.vue";
import Top from "./layouts/edgex_detail/Top.vue";
import { getEdgex } from "@/controller/Edgex";
import { Edgex } from "model";
import { useRoute } from "vue-router";
import { isString } from "@/utils/typeGuard";

export default defineComponent({
  name: "EdgexDetailPage",
  components: { Layout, Top },
  setup() {
    const edgex = ref<Edgex>();
    const route = useRoute();
    const ready = ref<boolean>(false);
    const load = async () => {
      if (isString(route.query.id)) {
        ready.value = false;
        const res = await getEdgex(route.query.id);
        if (res) {
          edgex.value = res;
          ready.value = true;
        }
      }
    };
    onBeforeMount(async () => {
      await load();
      console.log(edgex.value);
    });
    const id = ref<number>(0);
    const refresh = async () => {
      await load();
    };
    provide("refresh", refresh);
    return { ready, edgex, id };
  },
});
</script>

<style scoped lang="scss"></style>
